<template>
    <div class="page record-ui">
        <div class="record-null" v-if="!recordList.length">
            <cube-button>无就诊记录</cube-button>
            <img src="./img/hospital.png">
            <p>暂无就诊记录</p>
        </div>
        <div class="record-select">
            <p>首次就诊</p>
            <img src="./img/nav.png" @click="showPicker">
        </div>
        <div class="doctor-box">
            <img :src="recordList[index].img">
            <div class="doctor-info">
                <span>{{recordList[index].doctor}}</span>
                <p>{{recordList[index].intro}}</p>
            </div>
        </div>
        <div class="case-box">

        </div>
    </div>
</template>
<script>
    const column1 = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
        { text: '幽鬼', value: '幽鬼' }]
    export default {
        data() {
            return {
                index: 0,
                recordList: [
                    {
                        doctor: "刘主任",
                        img: "http://www.bucmdf.edu.cn/d/file/xymz/ysjj/2016-11-25/b3f4bb2bca5c6bc276c8a4b51fc5e861.jpg",
                        intro: "主任医师，教授，博士生导师，国家级名老中医药专家，全国优秀中医临床研修老师，北京市中医住院医师规范化培训师承指导老师，全国中医院优秀院长。受教于中医大师刘渡舟教授、苏宝刚教授，继承经典辨证思路，擅长运用精方辨证施治。",
                    },
                    {
                        doctor: "唐主任",
                        img: "http://img.zcool.cn/community/01f9ea56e282836ac72531cbe0233b.jpg@2o.jpg",
                        intro: "主任医师，教授，博士生导师，国家级名老中医药专家，全国优秀中医临床研修老师，北京市中医住院医师规范化培训师承指导老师，全国中医院优秀院长。受教于中医大师刘渡舟教授、苏宝刚教授，继承经典辨证思路，擅长运用精方辨证施治。",
                    }
                ]
            }
        },
        methods: {
            showPicker() {
                if (!this.picker) {
                    this.picker = this.$createPicker({
                        title: 'Picker',
                        data: [column1],
                        onSelect: this.selectHandle,
                        onCancel: this.cancelHandle
                    })
                }
                this.picker.show()
            },
            selectHandle(selectedVal, selectedIndex, selectedText) {
                console.log(selectedIndex)
                this.index = selectedIndex
            },
        }
    }
</script>
<style type="text/stylus" lang="stylus">
    .record-ui
        .cube-btn
            width 74.7%
            height 1.17rem
            background #42A7BD
            border-radius 6px
            margin-top 3rem
            color #FFF

</style>
<style scoped type="text/stylus" lang="stylus">
    .page
        width 100%
        height 100%
        background #FFF
        .record-null
            position fixed
            top 0
            right 0
            left 0
            bottom 0
            background #FFF
            display flex
            flex-direction column
            align-items center
            img
                width 2.29rem
                height 2.36rem
                margin-top 2.93rem
            p
                color #797878
                font-size 0.4rem
                margin-top 0.53rem
                font-weight 500
        .record-select
            width 56.7%
            padding 0 6% 0 10%
            height 1.17rem
            margin 0.53rem auto
            background #42A7BD
            border-radius 0.13rem
            color #FFF
            font-size 0.4rem
            display flex
            justify-content space-between
            align-items center
            img
                width 0.26rem
                height 0.38rem
        .doctor-box
            width 86%
            padding 0 10% 0 4%
            height 1.87rem
            display flex
            justify-content start
            align-items center
            margin-bottom 0.88rem
            img
                width 1.87rem
                height 1.87rem
            .doctor-info
                margin-left 0.29rem
                height 1.87rem
                span
                    font-size 0.4rem
                    color #333333
                    height 0.8rem
                    line-height 0.8rem
                p
                    height 1rem
                    font-size 0.32rem
                    color #333333
                    line-height 0.36rem
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
        .case-box
            width 92%
            margin 0 auto
            min-height 9.33rem
            background #EEE
            border-radius 4px
</style>
